// js/ui/Modal.js
export default class DailyLoginDialog {
  constructor(options = {}, textRenderer, screenAdapter, resourceManager) {
    // 默认配置
    this.config = {
      x: options.x || 0,
      y: options.y || 0,
      width: options.width || 320,
      height: options.height || 200,
      signDays: options.signDays || 0,
      signDate: options.signDate || 1,
    }
    this.screenAdapter = screenAdapter
    this.textRenderer = textRenderer
    this.resourceManager = resourceManager
    this.DAY_WIDTH = 264;
    this.DAY_TOP_HEIGHT = 42;
    this.DAY_BOTTONM_HEIGHT = 154;
    this.DAY_TOP_COLOR = '#3E5FB0';
    this.DAY_BOTTOM_COLOR = '#243684';
    this.DAY_SELETE_COLOR = '#243684';
    this.SEVEN_DAY_WIDTH = 532;
    this.DAY_TOP_MARGIN = 144;
    this.dayPrizeData = [
      {
        text: '第一天',
        num: 10000
      },
      {
        text: '第二天',
        num: 20000
      },
      {
        text: '第三天',
        num: 30000
      },
      {
        text: '第四天',
        num: 40000
      },
      {
        text: '第五天',
        num: 50000
      },
      {
        text: '第六天',
        num: 60000
      },
      {
        text: '第七天',
        num: 70000
      }
    ]
  }

  show() {
    this.visible = true;
  }

  hide() {
    this.visible = false;
  }

  draw(ctx) {
    // 横屏奖励页面背景
    ctx.fillStyle = 'rgba(0, 0, 0, 0.6)'; // 半透明黑色
    ctx.fillRect(0, 0, this.screenAdapter.DESIGN_WIDTH, this.screenAdapter.DESIGN_HEIGHT);

    const signPopupBg = this.resourceManager.getImage('signPopupBg');
    ctx.drawImage(signPopupBg, this.screenAdapter.DESIGN_WIDTH / 2 - signPopupBg.width / 2, 70, 1068, 478);
    const againIcon = this.resourceManager.getImage('againIcon');
    ctx.drawImage(againIcon, this.screenAdapter.DESIGN_WIDTH / 2 - againIcon.width / 2 + 4, 592, 239, 88);
    this.textRenderer.drawText('领 取', this.screenAdapter.DESIGN_WIDTH / 2, 620, `bold 32px ${this.textRenderer.systemFont}`, '#ffffff', 'center', 'top')

    // 横屏布局 - 标题
    this.textRenderer.drawText('每周签到', this.screenAdapter.DESIGN_WIDTH / 2, 90, `bold 36px ${this.textRenderer.systemFont}`, '#ffffff', 'center', 'top')

    const basicWidth = this.screenAdapter.DESIGN_WIDTH / 2 - signPopupBg.width / 2;
    const magin = 4;
    this.dayPrizeData.forEach((item, index) => {

      if (index <= 3) {
        this.drawDayPrizeSection(ctx, basicWidth + index * this.DAY_WIDTH + index * magin, this.DAY_TOP_MARGIN, item, index + 1 <= this.config.signDays)
      } else if (index > 3 && index < 6) {
        let originIndex = index - 4
        this.drawDayPrizeSection(ctx, basicWidth + originIndex * this.DAY_WIDTH + originIndex * magin, this.DAY_TOP_MARGIN + this.DAY_TOP_HEIGHT + this.DAY_BOTTONM_HEIGHT + magin, item, index + 1 <= this.config.signDays)
      } else {
        this.drawSevenDayPrizeSection(ctx, basicWidth + 2 * this.DAY_WIDTH + 2 * magin, this.DAY_TOP_MARGIN + this.DAY_TOP_HEIGHT + this.DAY_BOTTONM_HEIGHT + magin, item, index + 1 <= this.config.signDays)
      }
    })

    const dayIcon1 = this.resourceManager.getImage('dayIcon1');
    ctx.drawImage(dayIcon1, 338, 212, 137, 72);
    const dayIcon2 = this.resourceManager.getImage('dayIcon2');
    ctx.drawImage(dayIcon2, 602, 210, 150, 94);
    const dayIcon3 = this.resourceManager.getImage('dayIcon3');
    ctx.drawImage(dayIcon3, 836, 214, 194, 95);
    const dayIcon4 = this.resourceManager.getImage('dayIcon4');
    ctx.drawImage(dayIcon4, 1112, 214, 198, 84);
    const dayIcon5 = this.resourceManager.getImage('dayIcon5');
    ctx.drawImage(dayIcon5, 312, 422, 186, 78);
    const dayIcon6 = this.resourceManager.getImage('dayIcon6');
    ctx.drawImage(dayIcon6, 592, 412, 166, 88);
    const dayIcon7 = this.resourceManager.getImage('dayIcon7');
    ctx.drawImage(dayIcon7, 998, 398, 166, 118);

    ctx.restore();
  }

  drawDayPrizeSection(ctx, x, y, item, isSelete) {
    ctx.fillStyle = this.DAY_TOP_COLOR;
    ctx.fillRect(x, y, this.DAY_WIDTH, this.DAY_TOP_HEIGHT);
    ctx.fillStyle = this.DAY_BOTTOM_COLOR;
    ctx.fillRect(x, y + this.DAY_TOP_HEIGHT, this.DAY_WIDTH, this.DAY_BOTTONM_HEIGHT);
    this.textRenderer.drawText(item.text, x + this.DAY_WIDTH / 2, y + this.DAY_TOP_HEIGHT / 2 - 10, `28px ${this.textRenderer.systemFont}`, '#ffffff', 'center', 'top')
    this.textRenderer.drawText(item.num, x + this.DAY_WIDTH / 2, y + this.DAY_TOP_HEIGHT + this.DAY_BOTTONM_HEIGHT - 30, `24px ${this.textRenderer.systemFont}`, '#ffffff', 'center', 'top')

    if (isSelete) {
      const claimedIcon = this.resourceManager.getImage('claimedIcon');
      ctx.drawImage(claimedIcon, x + this.DAY_WIDTH - 78, y + this.DAY_TOP_HEIGHT + this.DAY_BOTTONM_HEIGHT - 72, 58, 52);
      ctx.fillStyle = 'rgba(9,17,28,0.58)'; // 半透明黑色
      ctx.fillRect(x, y, this.DAY_WIDTH, this.DAY_TOP_HEIGHT + this.DAY_BOTTONM_HEIGHT);
    }
  }

  drawSevenDayPrizeSection(ctx, x, y, item, isSelete) {
    ctx.fillStyle = this.DAY_TOP_COLOR;
    ctx.fillRect(x, y, this.SEVEN_DAY_WIDTH, this.DAY_TOP_HEIGHT);
    ctx.fillStyle = this.DAY_BOTTOM_COLOR;
    ctx.fillRect(x, y + this.DAY_TOP_HEIGHT, this.SEVEN_DAY_WIDTH, this.DAY_BOTTONM_HEIGHT);
    this.textRenderer.drawText(item.text, x + this.SEVEN_DAY_WIDTH / 2, y + this.DAY_TOP_HEIGHT / 2 - 10, `28px ${this.textRenderer.systemFont}`, '#ffffff', 'center', 'top')
    this.textRenderer.drawText(item.num, x + this.SEVEN_DAY_WIDTH / 2, y + this.DAY_TOP_HEIGHT + this.DAY_BOTTONM_HEIGHT - 30, `24px ${this.textRenderer.systemFont}`, '#ffffff', 'center', 'top')

    if (isSelete) {
      const claimedIcon = this.resourceManager.getImage('claimedIcon');
      ctx.drawImage(claimedIcon, x + this.SEVEN_DAY_WIDTH - 78, y + this.DAY_TOP_HEIGHT + this.DAY_BOTTONM_HEIGHT - 72, 58, 52);
      ctx.fillStyle = 'rgba(9,17,28,0.58)'; // 半透明黑色
      ctx.fillRect(x, y, this.SEVEN_DAY_WIDTH, this.DAY_TOP_HEIGHT + this.DAY_BOTTONM_HEIGHT);
    }
  }

  handleTouch(event) {
    if (!this.visible) return;

    const touch = event.touches[0];
    const x = touch.clientX;
    const y = touch.clientY;

  }
}
